<template>
  <el-row>
    <el-col :sm="12" :xs="24"  class="input-box">
      <div class="input-box__header">
        <slot name="header">
          <h1>{{title}}</h1>
        </slot>
      </div>
      <div class="input-box__body">
        <slot name="body"></slot>
      </div>
      <div class="input-box__footer">
        <slot name="footer"></slot>
      </div>
    </el-col>
  </el-row>
</template>
<script>
  export default {
    data () {
      return {};
    },
    props: [
      'title'
    ]
  };
</script>
<style lang="scss">
  @import "../../sass/variables";
  .input-box{
    overflow: hidden;
    border:1px solid #c3e3b5;
    &__header{
      h1{
        font-size: 1rem;
        padding: 0;
        margin: 0;
        line-height: 2rem;
        font-weight: normal;
        text-indent:1rem;
        color:white;
        background-color: $brand-primary;
      }
    }
    &__body{
      padding: 0.5rem;
    }
    &__footer{
      padding: 0.5rem;
      text-align: right;
    }
  }

</style>
